<template>
    <div>
        <div class="header">
            <h1>人口增长对社会影响可视化分析</h1>
            <div class="time">
                现在的时间:{{ timeData }}
            </div>
        </div>
         
    </div>
</template>


<script setup lang="ts">
import { ref } from 'vue'
const timeData = ref('')
setInterval(()=>{
    const data = new Date()
    const year = data.getFullYear()
    const mount = data.getMonth() + 1
    const day = data.getDate()+''
    const hour = data.getHours() + ''
    const min = data.getMinutes() + ''
    const sec = data.getSeconds() + ''
    timeData.value = `${year}-${mount}-${day} ${hour}:${min}:${sec}`
})

</script>

<style scoped lang="scss">
.header{
    height: 106px;
    // color: #fff;
    position: relative;
    background-color: rgba(225, 225, 225, 0.05);
    h1{
        color: #fff;
        line-height: 106px;
        text-align: center;
        font-size: 35px;
    }
    .time{
        position: absolute;
        top: 50px;
        right: 20px;
        font-size: 20px;
        color: #fff;
    }
}
</style>